<template>
  <div class="header">
    <div class="title">
      <div class="title-center">
        <div class="title-right">
          <div>热线：151-539-19759</div>
          <div v-if="this.sign != null">
            <a href="javascript:void(0);" @click="$router.push('index')">首页</a>
          </div>
          <div v-if="this.sign != null">
            <a href="javascript:void(0);" @click="$router.push('bidding')">招标大厅</a>
          </div>
        </div>
        <div class="title-left">
          <div v-if="this.sign != null">
            <button @click="outerVisible = true">发布需求</button>
          </div>
          <div v-if="this.sign == null">
            <button>
              <a @click="$router.push('/logo/sign')">请登录</a>
            </button>
          </div>
          <div v-else>
            <span>{{ sign }}</span>
          </div>
          <div v-if="this.sign == null">
            <button>
              <a @click="$router.push('/logo/regist')">注册</a>
            </button>
          </div>
          <div v-if="this.sign != null">
            <button>
              <a @click="$router.push('workbench')">工作台</a>
            </button>
          </div>
          <div v-if="this.sign != null"><button @click="zhanghu()">账户设置</button></div>
          <!-- 账户设置输入密码访问 -->
          <el-dialog class="account" title="账户设置" :visible.sync="dialogFormVisible">
            <table class="zhanghu_table">
              <tr>
                <el-input placeholder="请输入登录密码" class="table_input" v-model="input" show-password></el-input>
              </tr>
              <tr class="button_right">
                <el-button type="primary" @click="jinru()" class="buttons" plain>进入</el-button>
                <el-button type="primary" @click="dialogFormVisible = false" plain>取消</el-button>
              </tr>
            </table>
          </el-dialog>
          <!-- 账户设置详情 -->
          <el-dialog class="set_up" title="账户设置" 
          :visible.sync="dialogFormVisibles"
          @close="closed()"
          >
            <table class="set_up_table">
              <tr>
                <td>账户手机号：</td>
                <td><el-input disabled v-model="ruleForm.phone"></el-input></td>
              </tr>
              <tr>
                <td>账户邮箱：</td>
                <td><el-input disabled v-model="ruleForm.email"></el-input></td>
              </tr>
              <tr>
                <td>账户密码：</td>
                <td><el-input v-model="poss" show-password></el-input></td>
              </tr>
              <tr>
                <td>单位名称：</td>
                <td><el-input v-model="ruleForm.company"></el-input></td>
              </tr>
              <tr>
                <td>信用代码：</td>
                <td><el-input v-model="ruleForm.credit"></el-input></td>
              </tr>
              <tr>
                <td>联系人名称：</td>
                <td><el-input v-model="ruleForm.name"></el-input></td>
              </tr>
              <tr>
                <td><el-button type="primary" @click="baocun()" style="color: #fff;background-color: #409eff;border-color: #409eff;">保存</el-button></td>
                <td><el-button type="primary" @click="dialogFormVisibles = false" style="color: #fff;background-color: #409eff;border-color: #409eff;">取消</el-button></td>
              </tr>
            </table>
          </el-dialog>
        </div>
      </div>
    </div>
    <!-- 发布需求 -->
    <el-dialog
      :visible.sync="outerVisible"
      class="outerVisible"
      @close="close()"
    >
      <div class="outerVisible-beader"><span>发布需求</span></div>
      <div class="outerVisible-center">
        <div class="outerVisible-left">
          <div class="outerVisible-left-one">
            <div>
              <span class="outerVisible-bitian">*</span>
              <span class="outerVisible-biaoti">所属类目：</span>
            </div>
            <div>
              <button @click="innerVisible = true">{{ qxzlm }}</button>
            </div>
          </div>
          <div class="outerVisible-left-two">
            <div>
              <span class="outerVisible-bitian">*</span>
              <span class="outerVisible-biaoti">需求名称：</span>
            </div>
            <div>
              <input
                type="text"
                placeholder="用40个字以内的一句话描述你的需求，例如：企业的微信公众号开发"
                maxlength="40"
                v-model="procura"
              />
            </div>
          </div>
          <div class="outerVisible-left-three">
            <div>
              <span class="outerVisible-bitian">*</span>
              <span class="outerVisible-biaoti">需求描述：</span>
            </div>
            <!-- 富文本输入框 -->
            <div>
              <quill-editor
                ref="myTextEditor"
                style="height: 600px; text-algin: left"
                v-model="editor"
              ></quill-editor>
            </div>
            <div>
              本内容将在需求大厅栏目公开展示，请勿包含与项目，客户相关等隐私信息，以及QQ号，电话号码等联系方式。
            </div>
          </div>
          <div class="outerVisible-left-serse">
            <div>
              <button onclick="document.querySelector('#txt').click()" style="" :disabled="fileShow">
                <img :src="o_img" alt="" />
                <span>添加附件</span>
              </button>
              <input type="file" style="display:none" id="txt" @click="txtbtn" @change="loadTextFromFile" />
            </div>
            <div class="text" v-show="fjname">
              <span>{{file}}</span>
            </div>
            <div class="textButton" v-show="chakan">
              <button @click="innerVisibled = true">查看</button>
            </div>
            <div>
              <span>更多业务要求请放在附件</span>
              <span class="span"
                >可上传1个2.5KB以内的txt文件</span
              >
            </div>
          </div>
        </div>
        <div class="outerVisible-right">
          <div class="outerVisible-right-one">
            <div>
              <span>确认你的联系方式，方便服务商与您沟通</span>
            </div>
            <div>
              <input type="text" :placeholder="xvqiu.name" v-model="name" />
              <input type="text" :placeholder="xvqiu.phone" v-model="phone" />
            </div>
          </div>
          <div class="outerVisible-right-two">
            <div>
              <span class="outerVisible-bitian">*</span>
              <span class="outerVisible-biaoti">你的项目预算是：</span>
            </div>
            <div>
              <input
                type="text"
                placeholder="最高8位"
                maxlength="8"
                v-model="money"
              />
              <span>元</span>
            </div>
          </div>
          <div class="outerVisible-right-three">
            <button @click="tijiaoxq()">提交需求</button>
          </div>
        </div>
      </div>
      <el-dialog
        class="outerVisible-dialog"
        width="50%"
        :visible.sync="innerVisible"
        append-to-body
      >
        <div class="outerVisible-dialog-center">
          <span>类目选择</span>
          <div class="outerVisible-dialog-center-block">
            <el-tabs
              class="tabls"
              :tab-position="tabPosition"
              style="height: 200px"
            >
              <el-tab-pane
                v-for="(r, index) in rjdzkf"
                :key="index"
                :label="r.name"
              >
                <button
                  v-for="(s, key) in r.second"
                  :key="key"
                  @click="yxzlmas(s.name,r.id,s.id)"
                >
                  {{ s.name }}
                </button>
              </el-tab-pane>
            </el-tabs>
          </div>
        </div>
        <div class="outerVisible-dialog-bottom">
          <div>
            <button @click="queren">确认</button>
            <button @click="innerVisible = false">取消</button>
          </div>
        </div>
      </el-dialog>
      <el-dialog
        class="outerVisible-dialogs"
        width="50%"
        :visible.sync="innerVisibled"
        append-to-body
      >
      <div class="outerVisible-dialogs-center">
        <span class="span">查看附件</span>
        <div class="text" style="overflow: auto">
          {{fileTxt}}
        </div>
      </div>
      <div class="outerVisible-dialogs-bottom">
        <el-button type="primary" @click="innerVisibled = false">保存</el-button>
        <el-button type="info" @click="innerVisibled = false;fjname='',fjname=false;chakan=false;fileTxt='';fileSize='';fileShow = false;">更改</el-button>
      </div>
      </el-dialog>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fileShow:false,
      fileTxt:'',//文件上传内容
      fileSize:'',//文件大小
      file:'',//文件上传名称
      fjname:false,//附件名称
      chakan:false,//附件查看隐藏
      innerVisibled:false,//附件查看
      poss:'******',//账户设置修改
      ruleForm:[], // 账户设置修改
      dialogFormVisibles:false,//账户设置详情显示
      input:'',//账户设置密码
      dialogFormVisible:false,//账户设置
      xvqiu:[],//发布需求的姓名和手机号
      procura:'',//需求名称为空
      editor: '',//富文本编辑器为空
      name:'',//姓名为空
      phone:'',//手机号为空
      money:'',//预算为空
      qxzlm: "请选择类目",//所属分类
      sign: [],//本地保存的用户名
      tabPosition: "left",//类目选择弹框
      yxzlma: "", //确认子类目名称
      cate:'',//选择主类目id
      catepid:'',//确认后子类目id
      rjdzkf: [],//类目选择数据
      outerVisible: false,//发布需求关闭
      innerVisible: false,//发布取消
      o_img: require("@/assets/img/fabuxuqiu.png"),
    };
  },
  created() {
    if(JSON.parse(localStorage.getItem("logo")) != null){
      //账号设置获取值
      this.http
        .type('/index',{ type: "setup",phone:JSON.parse(localStorage.getItem("logo")) })
        .then((res) => {
          this.ruleForm = res.data;
        })
    }
    //投标剩余时间
    this.http
      .type('/index',{ type: "Deadline_days" })
      .then();
    //用户手机号
    this.sign = JSON.parse(localStorage.getItem("logo"));
    //类目选择
    this.http
      .type('/index',{ type: "lmxz" })
      .then((response) => {
        this.rjdzkf = response.data;
      })
    //发布需求中用户姓名和手机号的默认提示
    if (JSON.parse(localStorage.getItem("logo")) != null) {
      this.http
      .type('/index',{ type: "company",phone:JSON.parse(localStorage.getItem("logo")) })
      .then((response) => {
        this.xvqiu = response.data;
      })
    }else{
      this.xvqiu={
        'name' : 'name',
        'phone' : 'phone'
      }
    }  
  },
  methods: {
    closed(){//取消设置时重置
      this.http
      .type('/index',{ type: "setup",phone:JSON.parse(localStorage.getItem("logo")) })
      .then((res) => {
        this.ruleForm = res.data;
        this.poss = '******';
      })
    },
    baocun(){//账号设置，修改用户信息
      if(this.poss !="******"){
        this.ruleForm.poss = this.$md5(this.poss);
        this.$confirm('您的新密码是：'+this.poss+' ,是否继续?', '保存', {
          confirmButtonText: '保存',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.http
          .type('/index',{ type: "setupInsert",ruleForm:JSON.stringify(this.ruleForm) })
          .then((res) => {
            if(res.data.code == 1){
              this.$message({
                type: 'success',
                message: res.data.msg
              });
              this.dialogFormVisibles = false;
            }else{
              this.$message(res.data.msg);
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消！'
          });          
        });
      }else{
        this.http
        .type('/index',{ type: "setupInsert",ruleForm:JSON.stringify(this.ruleForm) })
        .then((res) => {
          if(res.data.code == 1){
            this.$message({
              type: 'success',
              message: res.data.msg
            });
            this.dialogFormVisibles = false;
          }else{
            this.$message(res.data.msg);
          }
        })
      }
    },
    zhanghu(){//点击账户设置
      if (JSON.parse(localStorage.getItem("password")) != null) {
        this.dialogFormVisibles = true;
      }else{
        this.dialogFormVisible = true;
      }
    },
    jinru(){//进入账户设置
      if (this.input !='') {
        this.http
        .type('/index',{ type: "password",poss:this.input,phone:JSON.parse(localStorage.getItem("logo")) })
        .then((res) => {
          if (res.data.code == 1) {
            this.$message({
              message: res.data.msg,
              type: 'success'
            });
            localStorage.setItem('password',JSON.stringify(this.$md5(this.input)));
            this.dialogFormVisible = false;//让输入密码隐藏
            this.dialogFormVisibles = true;//让账户设置显示
            this.input = '';
          }else{
            this.input = '';
            this.$message.error(res.data.msg);
          }
        })
      }else{
        this.$message({
          showClose: true,
          message: '密码不能为空！',
          type: 'warning'
        });
      }
    },
    yxzlmas: function (res,index,key) {//类目选择二级
      this.yxzlma = res;//选择的子类目名称
      this.cate = index;//选择主类目id
      this.catepid = key;//确认后子类目id
    },
    queren: function () {//类目选择确定
      this.qxzlm = this.yxzlma;
      this.innerVisible = false;
    },
    // txt文本
    txtbtn() {
      document.getElementById("txt").click();//打开本地磁盘
    },
    loadTextFromFile(e) {
      console.log(e);
      const file = e.target.files[0];
      let name = file.name.split(".").splice(-1).toString();
      if (name !== "txt") {
        this.$message({
          message: '文件类型错误,请重新选择文件',
          type: 'warning'
        });
        return;
      }else{
        var size = 0;
        size =file.size;
        size = (size / 1024).toFixed(1);//kb 1kb=1024个字节
        this.fileSize = size;
        if(this.fileSize < 2.6){
          this.fileShow = true;
          this.file = file.name;//文件名称
          this.fjname=true;//附件名称
          this.chakan=true;//附件查看隐藏
        }else{
          this.fileSize = '';
          this.fileShow = false;
          this.$message({
            message: '请上传2.5KB以内的文件',
            type: 'warning'
          });
          return;
        }
      }
      const reader = new FileReader();
      if (typeof FileReader === "undefined") {
        alert("您的浏览器不支持FileReader接口");
      }
      reader.onload = (e) => this.$emit("load", this.dealNum(e.target.result));
      reader.readAsText(file, "utf-8"); 
    },
    dealNum(item) {//文件上传内容
      this.fileTxt = item;
      //text最多存  2.5kb
    },
    close(){//发布需求关闭时为空
      this.fileShow = false,//文件按钮可以点击
      this.fileTxt = '',//文件内容为空
      this.fileSize = '',//文件大小为空 
      this.file = '',//文件上传为空
      this.cate = '',//类目一级为空
      this.catepid = '',//类目二级为空
      this.procura = '',//需求名称为空
      this.editor = '',//富文本编辑器为空
      this.name = '',//姓名为空
      this.phone = '',//手机号为空
      this.money = '',//预算为空
      this.qxzlm = "请选择类目";//所属分类
    },
    tijiaoxq() {
      //提交需求 -- 验证
      if (this.qxzlm != '请选择类目') {
        if (/^[\u4e00-\u9fa5]{2,40}$/.test(this.procura)) {
          if (this.editor != '') {
            if (/^[\u4e00-\u9fa5]{1,8}$/.test(this.name) && /^1(3|4|5|6|7|8|9)\d{9}$/.test(this.phone)) {
              if (/^(([1-9][0-9]{0,14})|([0]{1})|(([0]\\.\\d{1,2}|[1-9][0-9]{0,14}\\.\\d{1,2})))$/.test(this.money)) {
                this.http
                .type('/index',{ type: "zbdts",cate:this.cate,catepid:this.catepid,title:this.procura,describe:this.editor,name:this.name,phone:this.phone,price:this.money,file:this.file,fileTxt:this.fileTxt })
                .then((response) => {
                  var code = response.data.code;
                  var msg = response.data.msg;
                  if (code == 1) {
                    this.$message({
                      showClose: true,
                      message: msg,
                      type: 'success'
                    });
                  }else{
                    this.$message({
                      showClose: true,
                      message: msg,
                      type: 'error'
                    });
                  }
                }),
                this.outerVisible = false;//关闭弹框 
              }else{
                this.$message({
                  showClose: true,
                  message: '请填写项目预算再提交哦！',
                  type: 'warning'
                });
              }
            }else{
              this.$message({
                showClose: true,
                message: '请填写合法的姓名和手机号再提交哦！',
                type: 'warning'
              });
            }
          }else{
            this.$message({
              showClose: true,
              message: '请填写需求描述再提交哦！',
              type: 'warning'
            });
          }
        }else{
          this.$message({
            showClose: true,
            message: '请按要求填写需求名称再提交哦！',
            type: 'warning'
          });
        }
      }else{
        this.$message({
          showClose: true,
          message: '请选择所属类目再提交哦！',
          type: 'warning'
        });
      }
    },
  },
};
</script>

<style lang="less" scoped>
// 头部
.title {
  width: 100%;
  height: 40px;
  background-color: #d5d4d4;
}

.title-center {
  width: 80%;
  height: 40px;
  margin: 0 auto;
}

.title-right {
  float: left;
}

.title-right div {
  font-size: 14px;
  float: left;
  height: auto;
  line-height: 40px;
  margin-right: 20px;
  color: #555555;
}

.title-right div a {
  text-decoration: none;
  color: #555555;
}

.title-left {
  float: right;
}

.title-left div {
  float: left;
  height: auto;
  line-height: 40px;
  margin-left: 20px;
}

.title-left div a {
  text-decoration: none;
  color: #555555;
}

.title-left div button {
  border: 0;
  background-color: #d5d4d4;
  color: #555555;
  font-size: 14px;
}
.title-left div span {
  border: 0;
  background-color: #d5d4d4;
  color: #555555;
  font-size: 14px;
}

.title-left div button:hover {
  cursor: pointer;
}
/* 主页导航栏 */

.outerVisible /deep/ .el-dialog__header {
  padding: unset;
}

.outerVisible /deep/ .el-dialog__header .el-icon-close {
  border: 1px solid white;
  border-radius: 100%;
}

.outerVisible /deep/ .el-dialog__headerbtn .el-dialog__close {
  color: white;
}

.outerVisible /deep/ .el-dialog {
  width: 70%;
  margin-top: 5vh !important;
}

.outerVisible /deep/ .el-dialog__headerbtn {
  top: 10px;
}

.outerVisible /deep/ .el-dialog__body {
  padding: 0px 0px 30px 0px;
}

.outerVisible /deep/ .el-dialog__body .outerVisible-beader span {
  float: left;
  margin-left: 20px;
  color: white;
}

.outerVisible-beader {
  width: 100%;
  height: 40px;
  line-height: 40px;
  background-color: #1abc9c;
  margin-bottom: 20px;
}

.outerVisible-center {
  width: 95%;
  height: 600px;
  margin: 0 auto;
}

.outerVisible-center button:hover {
  cursor: pointer;
}

.outerVisible-left {
  width: 45%;
  float: left;
  /* border: 1px solid black; */
}

.outerVisible-right {
  width: 52%;
  float: right;
}

.outerVisible-left-one {
  width: 100%;
}

.outerVisible-bitian {
  color: red;
  margin-right: 5px;
}

.outerVisible-biaoti {
  font-size: 13px;
  line-height: 25px;
}

.outerVisible-left-one {
  float: left;
}

.outerVisible-left-one div:first-child {
  float: left;
}

.outerVisible-left-one div:last-child {
  float: left;
  margin-left: 5px;
}

.outerVisible-left-one div:last-child button {
  border: 1px solid orange;
  background-color: white;
  color: orange;
  height: 25px;
  padding:3px 10px 22px 10px;
  border-radius:5px;
}

.outerVisible-left-two {
  float: left;
  margin-top: 10px;
}

.outerVisible-left-two div:first-child {
  float: left;
}

.outerVisible-left-two div:last-child {
  float: left;
  width: 442px;
  height: auto;
}

.outerVisible-left-two div:last-child input {
  width: 447px;
  height: 35px;
  border: 1px solid #cccccc;
  border-radius: 5px;
  outline: none;
  padding-left: 10px;
}

.outerVisible-left-three {
  float: left;
  margin-top: 20px;
  height: 390px;
}

.outerVisible-left-three div:nth-child(2) {
  height: 355px;
}

.outerVisible-left-three div:last-child {
  font-size: 9px;
  color: #8f8a8a;
}

/* 富文本编辑器 */

.quill-editor {
  height: 260px !important;
}

.ql-snow {
  width: 100px;
}

.outerVisible-left-serse {
  float: left;
  margin-top: 10px;
  height: 40px;
  display: flex;
  align-items: center;
}

.outerVisible-left-serse div:first-child {
  float: left;
}

.outerVisible-left-serse div:first-child button {
  width: 70px;
  height: 27px;
  background-color: white;
  border: 1px solid #f19263;
  border-radius: 2px;
}

.outerVisible-left-serse div:first-child button img {
  width: 20px;
  height: 20px;
  float: left;
}

.outerVisible-left-serse div:first-child button span {
  float: left;
  color: #f19263;
  font-size: 11px;
  line-height: 20px;
}
.outerVisible-left-serse .text{
  margin-left: 5px;
  height: 30px;
  line-height: 30px;
}
.outerVisible-left-serse .text span{
  font-size: 13px;
}
.outerVisible-left-serse .textButton{
  margin-left: 5px;
}
.outerVisible-left-serse .textButton button{
  width: 40px;
  height: 20px;
  border-radius: 5px;
  border: 1px solid #409eff;
  background-color: #409eff;
  color: white;
  font-size: 12px;
}

.outerVisible-left-serse div:last-child {
  width: 50%;
  line-height: 20px;
}
.outerVisible-left-serse div:last-child{
  width: 140px;
  margin-left: 10px;
}
.outerVisible-left-serse div:last-child span {
  float: left;
}

.outerVisible-left-serse div:last-child span:first-child {
  font-size: 11px;
  color: black;
}

.outerVisible-left-serse div:last-child .span {
  font-size: 10px;
  color: #8f8a8a;
}

/* 右侧 */

.outerVisible-right-one {
  width: 50%;
  height: 60px;
  margin-top: 30px;
}

.outerVisible-right-one div:first-child {
  float: left;
}

.outerVisible-right-one div:first-child span {
  font-size: 13px;
  line-height: 10px;
}

.outerVisible-right-one div:last-child {
  float: left;
  margin-top: 5px;
}

.outerVisible-right-one div:last-child input {
  height: 32px;
  border: 1px solid #cccccc;
  border-radius: 5px;
  outline: none;
  padding-left: 5px;
  padding-left: 10px;
}

.outerVisible-right-one div:last-child input:first-child {
  width: 65px;
}

.outerVisible-right-one div:last-child input:last-child {
  width: 100px;
  margin-left: 10px;
}

.outerVisible-right-two {
  float: left;
  width: 25%;
  margin-top: 30px;
}

.outerVisible-right-two div:first-child {
  float: left;
}

.outerVisible-right-two div:last-child {
  float: left;
}

.outerVisible-right-two div:last-child input {
  width: 70px;
  height: 32px;
  border: 1px solid #cccccc;
  border-radius: 5px;
  outline: none;
  float: left;
  padding-left: 10px;
}

.outerVisible-right-two div:last-child span {
  margin-left: 5px;
  line-height: 32px;
}

.outerVisible-right-three {
  width: 100%;
  float: left;
  margin-top: 30px;
}

.outerVisible-right-three button {
  float: left;
  width: 100px;
  height: 40px;
  background-color: #ec6b2b;
  color: white;
  border-radius: 3px;
  border: 1px solid #ec6b2b;
}

/* 类目选择 */

.outerVisible-dialog /deep/ .el-dialog {
  height: 420px;
  width: 44% !important;
}

.outerVisible-dialog /deep/ .el-dialog__header {
  display: none;
}

.outerVisible-dialog /deep/ .el-dialog__body {
  padding: 5px 0px 20px 20px;
}

.outerVisible-dialog-center {
  width: 97%;
  position: relative;
  margin-top: 10px;
}

.outerVisible-dialog-center span {
  width: 100%;
  display: block;
  padding-bottom: 10px;
  border-bottom: 1px solid #cccccc;
  font-size: 20px;
  font-weight: bold;
}
.outerVisible-dialog-center-block{
  margin-top: 10px;
}
.tabls /deep/ button {
  width: 120px;
  height: 31px;
  margin: 3.5px 8px;
  border: 1px solid #cccccc;
  background-color: white;
  border-radius: 4px;
  font-size: 13px;
}

.tabls /deep/ button:hover {
  cursor: pointer;
}

.tabls /deep/ .el-tabs__content {
  width: 68.5%;
}

/* 确认点击类目 */

.tabls /deep/ button:focus {
  border: 1px solid #1abc9c;
  color: #1abc9c;
  border-radius: 4px;
}

.tabls /deep/ .el-tabs__header {
  margin-right: 30px !important;
}

.tabls {
  height: 260px !important;
}

.tabls /deep/ .el-tabs__nav-wrap {
  border: 1px solid #eb6b29;
  border-bottom: 1px solid #eb6b29;
}

.tabls /deep/ .el-tabs__active-bar {
  background-color: #eb6b29;
  height: 52px;
}

.tabls /deep/ .el-tabs__item:hover {
  color: black;
  background-color: #f9e1d0;
}

.tabls /deep/ .el-tabs__item.is-active {
  color: black;
  background-color: #f9e1d0;
}

.tabls /deep/ .el-tabs__item {
  height: 52px;
  line-height: 52px;
  border-bottom: 1px dashed #eb6b29;
}

.tabls /deep/ .el-tabs__item.is-left {
  text-align: left;
}
.tabls /deep/ .el-tabs__item:last-child{
  border: 0;
}
.el-tabs--left, .el-tabs--right{
  overflow: unset;
}

.outerVisible-dialog-bottom {
  width: 94%;
  border-top: 1px solid #cccccc;
  position: absolute;
  top: 350px;
}

.outerVisible-dialog-bottom div {
  float: right;
  margin-right: 40px;
}

.outerVisible-dialog-bottom div button {
  margin-left: 10px;
  width: 70px;
  height: 40px;
  border-radius: 5px;
  border: 0;
  font-size: 15px;
  color: white;
  margin-top: 15px;
  background-color: #eb6b29;
}

.outerVisible-dialog-bottom div button:hover {
  cursor: pointer;
}

.outerVisible-dialog-bottom div button:last-child {
  color: #eb6b29;
  background-color: white;
  border: 1px solid #eb6b29;
}
// 点击文件查看
.outerVisible-dialogs /deep/ .el-dialog {
  height: 410px;
  width: 670px !important;
}

.outerVisible-dialogs /deep/ .el-dialog__header {
  display: none;
}

.outerVisible-dialogs /deep/ .el-dialog__body {
  padding: 10px 20px 20px 20px;
}
.outerVisible-dialogs-center span{
  font-size: 18px;
  font-weight: bold;
}
.outerVisible-dialogs-center .text{
  margin-top: 10px;
  height: 300px;
}
.outerVisible-dialogs-bottom{
  display: flex;
  justify-content: flex-end;
  border-top: 1px solid #cccccc;
  margin-top: 10px;
}
.outerVisible-dialogs-bottom .el-button{
  margin-top: 10px;
}
</style>
<style src="../views/src/headers.css"></style>